<template>
  <div class="task">
    <p>全部任务{{store.tanklist.length}}</p>
    <p>已完成{{store.tanklist.length-store.unFinished()}}</p>
    <p class="unfinished">未完成{{store.unFinished()}}</p>
  </div>
</template>

<script setup>
import {useCounterStore} from '../stores/counter'

//调用useCounterStore方法， 获取store对象
var store =useCounterStore()

</script>

<style scoped>
   .task{
    height: 40px;
    width: 100%;
    /* background-color: beige; */
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
   }
   .task p{
    height: 30px;
    width: 100px;
    background-color: rgb(38, 214, 38);
    text-align: center;
    color: white;
    line-height: 30px;
    margin-top: 5px;
   }
</style>